<!--
 * @Author: wrh123 482597539@qq.com
 * @Date: 2024-01-16 09:15:07
 * @LastEditors: wrh123 482597539@qq.com
 * @LastEditTime: 2024-01-22 22:10:35
 * @FilePath: /vue-admin/src/views/assessment/components/challenge.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="challenge">
    <el-card shadow="never">
      <el-form label-width="80px" :inline="true">
        <el-form-item label="申请日期:">
          <el-date-picker popper-class="form-data-ccc" v-model="value1" style="width: 220px;" size="mini"
            value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" type="daterange" range-separator="-"
            start-placeholder="开始日期" end-placeholder="结束日期" @change="handleDateChange" />
        </el-form-item>

        <el-form-item label="申请类型:">
          <el-select v-model="formApply.applyType" size="mini" placeholder="请选择账户模式">
            <el-option v-for="item in applyType" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>

        <el-form-item label-width="120px" label="申请结果:">
          <el-select v-model="formApply.applyResult" size="mini" placeholder="请选择账户模式">
            <el-option v-for="item in status" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>

        <el-form-item label="挑战项目:">
          <el-select v-model="formApply.challengeProject" size="mini" placeholder="请选择账户模式">
            <el-option label="全部" :value="null" />
            <el-option v-for="item in challenges" :key="item.id" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>

        <el-form-item label="申请账号:">
          <el-input v-model="formApply.accountNumber" size="mini" />
        </el-form-item>

        <el-form-item label-width="120px" label="申请人:">
          <el-input v-model="formApply.userName" size="mini" />
        </el-form-item>


        <!-- <el-form-item label="账户性质:">
          <el-select v-model="formApply.accountSource" size="mini" placeholder="请选择平台">
            <el-option label="付费" value="1" />
            <el-option label="免费" value="2" />
          </el-select>
        </el-form-item> -->
        <!-- <el-form-item label="申请人:">
          <el-input v-model="formApply.userName" size="mini" />
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" size="mini" @click="subimit">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card shadow="never" style="margin-top: 20px;">
      <!-- 表格 -->
      <el-table border :data="tableData" style="width: 100%">

        <el-table-column prop="accountType" align="center" label="账户类型">
          <template v-slot="{ row }">
            <span v-if="row.accountType === 0">外汇</span>
            <span v-if="row.accountType === 1">美股</span>
            <span v-if="row.accountType === 2">期货</span>
          </template>
        </el-table-column>
        <el-table-column prop="challengeProject" align="center" label="挑战项目">
          <template v-slot="{ row }">
            <span v-if="row.challengeProject === 0">评估</span>
            <span v-if="row.challengeProject === 1">即时</span>
            <span v-if="row.challengeProject === 2">固定</span>
            <span v-if="row.challengeProject === 3" @click="testClick(row)" class="testClick">比赛</span>
            <span v-if="row.challengeProject === 4">股票</span>
            <span v-if="row.challengeProject === 5">免费评估</span>
          </template>
        </el-table-column>
        <!--        <el-table-column-->
        <!--          prop="pattern"-->
        <!--          align="center"-->
        <!--          label="账户模式"-->
        <!--        >-->
        <!--          <template v-slot="{row}">-->
        <!--            &lt;!&ndash; <span v-if="row.pattern ===0">免费</span>-->
        <!--            <span v-if="row.pattern ===1">付费</span> &ndash;&gt;-->
        <!--            <div v-for="item in Account" :key="item.id">-->
        <!--              <span v-if="row.pattern === item.id">{{ item.name }}</span>-->
        <!--            </div>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <el-table-column prop="stage" align="center" label="所属阶段">
          <template v-slot="{ row }">
            <div v-for="item in PhaseList1" :key="item.id">
              <span v-if="row.stage === item.id">{{ item.name }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="accountMoney" align="center" label="账户规模" width="100" />
        <el-table-column prop="expansionPlan" align="center" label="扩展计划">
          <template v-slot="{ row }">
            <span v-if="row.expansionPlan === 0">Level 0</span>
            <span v-if="row.expansionPlan === 1">Level 1</span>
            <span v-if="row.expansionPlan === 2">Level 2</span>
            <span v-if="row.expansionPlan === 3">Level 3</span>
            <span v-if="row.expansionPlan === 4">Level 4</span>
            <span v-if="row.expansionPlan === 5">Level 5</span>
            <span v-if="row.expansionPlan === 6">Level 6</span>
            <span v-if="row.expansionPlan === 7">Level 7</span>
            <span v-if="row.expansionPlan === 8">Level 8</span>
          </template>
        </el-table-column>
        <el-table-column prop="expansionPlanFunds" align="center" label="交易资金" width="100" />
        <el-table-column prop="platform" align="center" label="平台" width="120">
          <template v-slot="{ row }">
            <span v-if="row.platform === 0">MT4</span>
            <span v-if="row.platform === 1">MT5</span>
            <span v-if="row.platform === 2">cTrader</span>
            <span v-if="row.platform === 3">POOL TRADER</span>
          </template>
        </el-table-column>
        <el-table-column prop="accountTagName" align="center" label="账号标签" />
        <el-table-column prop="plateau" align="center" label="经纪商" width="120">
          <template v-slot="{ row }">
            <span v-if="row.plateau === 1">Valutrades</span>
            <span v-if="row.plateau === 2">Exness</span>
            <span v-if="row.plateau === 3">FXPRO</span>
            <span v-if="row.plateau === 4">POOL TRADER</span>
          </template>
        </el-table-column>
        <el-table-column prop="userName" align="center" label="申请人" width="140" />
        <el-table-column prop="emails" align="center" label="邮箱" width="180" />
        <el-table-column prop="accountNumber" align="center" label="申请账号" width="120" />
        <el-table-column prop="timeOfPayment" align="center" label="申请时间" width="140" />
        <el-table-column prop="applyType" align="center" label="申请类型">
          <template v-slot="{ row }">
            <span v-if="row.applyType === 0">系统</span>
            <span v-if="row.applyType === 1">手动</span>
          </template>
        </el-table-column>
        <!--        <el-table-column-->
        <!--          prop="createTime"-->
        <!--          align="center"-->
        <!--          label="操作"-->
        <!--        >-->
        <!--          <template v-slot="{row}">-->
        <!--            <el-button v-if="applyResult === 0" type="text" @click="PendingBtn(row)">待处理</el-button>-->
        <!--            &lt;!&ndash; <el-button v-if="applyResult === 1" type="text">已处理</el-button> &ndash;&gt;-->
        <!--            <span v-if="row.applyResult === 1">同意</span>-->
        <!--            <span v-if="row.applyResult === 2">驳回</span>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <el-table-column align="center" label="状态">
          <template v-slot="{ row }">
            <el-button v-if="row.applyResult === 0 && row.applyType === 0" type="text" size="mini"
              @click="PendingBtn(row)">待处理
            </el-button>
            <el-button v-if="row.applyResult === 0 && row.applyType === 1" type="text" size="mini"
              @click="handMovementBtn(row)">待处理
            </el-button>
            <span v-if="row.applyResult === 1">同意</span>
            <span v-if="row.applyResult === 2">驳回</span>
          </template>
        </el-table-column>
        <el-table-column prop="applyProcessing" align="center" label="处理时间" width="140" />
        <el-table-column prop="applyFailReason" align="center" label="备注" />
      </el-table>
      <paging :page-size="formApply.pageSize" :total="total" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </el-card>
    <addPend :dialog-id="dialogId" :dialog-visible.sync="dialogVisible" @refresh="getApplyListArr" />
    <VueAdminHandMovement :dialog-id="dialogId" :table="tab" :handDialogVisible.sync="handDialogVisible"
      @refresh="getApplyListArr" />


  </div>
</template>

<script>
import { getApplyList, getChallengeApplicationTip } from '@/api/assessment'
import addPend from './addPend.vue'
import paging from '@/components/paging.vue'
import { Account, AccountType, challenges, PhaseList1, modifyTimeToEndOfDay } from '@/utils'
import VueAdminHandMovement from "@/views/assessment/components/handMovement.vue";


export default {
  name: 'VueAdminChallenge',
  components: {
    VueAdminHandMovement,
    paging,
    addPend,
  },
  data() {
    return {
      value1: null,
      dialogVisible: false, // 系统弹出框
      handDialogVisible: false, // 手动弹出框
      total: 50,
      tableData: [
        { pattern: 0, stage: 0, payment_result: 1 }
      ],
      formApply: {
        beginTime: null, // 开始日期
        challengeProject: null, // 挑战项目
        endTime: null, // 结束日期
        page: 1, // 当前页数
        pageSize: 10, // 每页显示条数
        applyType: null, // 申请类型
        userName: null, // 申请人
        applyResult: null, // 状态
        accountNumber: null,//申请账号
        // accountSource: null, //账户性质
      },
      applyType: [
        { id: null, name: '全部' },
        { id: 0, name: '系统' },
        { id: 1, name: '手动' },
      ],
      status: [
        { id: null, name: '全部' },
        { id: 0, name: '待处理' },
        { id: 1, name: '同意' },
        { id: 2, name: '驳回' },
      ],
      dialogId: null,
      tab: {}, // 当前选中的列表内容
    }
  },
  computed: {
    Account() {
      return Account
    },
    PhaseList1() {
      return PhaseList1
    },
    challenges() {
      return challenges
    },
    AccountType() {
      return AccountType
    }
  },

  mounted() {
    this.getApplyListArr()
  },

  methods: {
    async getApplyListArr() {
      const data = await getApplyList(this.formApply)
      this.tableData = data.records
      this.total = data.total
    },
    handleDateChange() {
      if (this.value1 !== null) {
        this.value1[1] = modifyTimeToEndOfDay(this.value1[1])
        this.formApply.beginTime = this.value1[0]
        this.formApply.endTime = this.value1[1]
      } else {
        this.formApply.beginTime = ''
        this.formApply.endTime = ''
      }
    },
    // 查询
    subimit() {
      clearTimeout(this.timer) // 清理上一次的定时器
      this.timer = setTimeout(() => {
        this.formApply.page = 1
        this.getApplyListArr()
      }, 100)
    },
    // 后期要改
    handleSizeChange(val) {
      this.formApply.pageSize = val
      this.getApplyListArr()
      // 处理分页大小改变的逻辑
    },
    handleCurrentChange(val) {
      this.formApply.page = val
      this.getApplyListArr()
      // 处理当前页码改变的逻辑
    },
    /**
     * @author 焦延龙 <19131965027@163.com>
     * @description 系统待处理弹出框
     * @date 2024/3/12
     */

    PendingBtn(row) {
      // console.log(row,'row');
      this.dialogId = row.id
      this.dialogVisible = true
    },
    /**
     * @author 焦延龙 <19131965027@163.com>
     * @description 手动待处理弹出框
     * @date 2024/3/12
     */
    handMovementBtn(row) {
      this.tab = row
      this.dialogId = row.id
      this.handDialogVisible = true
    },

    // 点击比赛弹出框
    testClick(row) {
      console.log(row, 'rowww')
      getChallengeApplicationTip(row.id).then(res => {
        console.log(res.paymentResult, 'kkkkkk')
        this.$alert(res.paymentResult, '提示', {
          // callback: action => {
          //   this.$message({
          //     type: 'info',
          //     message: `action: ${action}`
          //   });
          // }
        }
        )
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.testClick {
  color: blue;
}

.testClick:hover {
  font-size: 15px;
}

.el-form-item__label {
  width: 120px;
}

@media (max-width:768px) {

  .el-form-item {
    display: flex;


  }
}
</style>
